<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>登录医共体网络测试系统</title>
    <meta name="description" content="医共体网络测试系统">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.8.1}" rel="stylesheet"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">
        /* 重置默认样式，防止外部CSS影响 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            border: none !important; /* 全局重置边框 */
            outline: none !important; /* 全局重置轮廓 */
        }
        
        /* 错误标签样式 - 修复对齐问题 */
        label.error {
            position: absolute !important;
            display: block !important;
            color: #ff6b6b !important; /* 错误文本颜色 */
            font-size: 14px !important;
            margin-top: 45px !important;
            margin-bottom: 30px !important; /* 增加与下方输入框的间距 */
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
            text-align: left !important;
            width: 100% !important;
            float: none !important;
            white-space: nowrap !important;
            left: 0 !important;
        }
        
        /* 移除错误标签中可能残留的图标样式 */
        label.error i {
            display: none !important; /* 确保即使有图标也不显示 */
        }
        /* 错误标签中的图标样式 */
        label.error i {
            margin-right: 0 !important; /* 确保没有右边距 */
            font-size: 14px !important;
            display: inline-block !important; /* 确保图标和文本在同一行 */
            width: auto !important; /* 确保图标宽度不会导致额外空间 */
            padding: 0 !important; /* 确保没有内边距 */
        }
        
        /* 针对Font Awesome图标的额外修复 */
        label.error .fa-times-circle {
            margin-right: 0 !important;
            padding-right: 0 !important;
            position: static !important; /* 防止定位问题导致的空间 */
        }
        
        /* 重新设计登录页面布局 */
        body.signin {
            display: flex;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        /* 左侧图片区域 - 独立于内容框 */
        .left-image-container {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 50%;
            display: flex;
            align-items: center;
            padding-left: 10%; /* 与左侧屏幕保持一定距离 */
            z-index: 1;
        }
        
        /* 左上方新图片的样式 - 距离左边和上方有相同距离 */
        .top-left-image {
            position: absolute;
            left: 50px; /* 距离左边的距离 */
            top: 50px; /* 距离上方的距离，与左边保持相同 */
            z-index: 3; /* 确保显示在其他元素之上 */
        }
        
        .logo-index-image {
            max-width: 80%; /* 调整图片大小为原来的80%，可以根据需要进一步调整 */
            height: auto; /* 保持图片的宽高比 */
        }
        
        .logo-image {
            max-width: 100%;
            height: auto;
        }
        
        /* 右侧登录表单区域 */
        .right-content-container {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10%; /* 与右侧保持一定距离 */
            z-index: 2;
        }
        
        /* 增大登录窗尺寸 - 从380px改为450px，并增加高度 */
        .signinpanel {
            width: 450px;
            height: auto;
            min-height: 500px;
            margin: 0;
            color: rgba(255,255,255,.95);
            background-color: rgba(0, 132, 255, 0.2); /* 登录框背景色与当前保持一致 */
            padding: 40px 30px; /* 增加内边距以提高高度 */
            border-radius: 8px;
            background-image: none;
            /* 确保没有边框 */
            border: none !important;
            box-shadow: none !important;
            outline: none !important;
            border-width: 0 !important;
            box-shadow: 0 0 0 0 transparent !important; /* 确保没有阴影 */
        }
        
        /* 移除可能导致嵌套和白色底部的元素样式 */
        .signinpanel .row {
            background: transparent !important;
            margin: 0 !important;
        }
        
        .signinpanel .col-sm-12 {
            background: transparent !important;
            padding: 0 !important;
        }
        
        /* 表单输入框样式调整 - 配合增大的尺寸 */
        .signinpanel .form-control {
            height: 45px !important; /* 确保输入框高度与验证码图片一致 */
            font-size: 16px;
            background-color: rgb(1, 39, 94); /* 输入框背景色与当前保持一致 */
            border-color: transparent !important; /* 透明边框 */
            color: white; /* 输入文本颜色为白色 */
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 20px;
            padding-left: 55px; /* 增加左侧内边距至55px，确保图标不会盖住文字 */
            padding-right: 15px; /* 重置右侧内边距，移除右侧图标空间 */
            border-radius: 4px; /* 保持圆角 */
        }
        
        /* 输入框占位符文本颜色 */
        .signinpanel .form-control::placeholder {
            color: white; /* 占位符文本颜色为白色 */
            opacity: 0.8;
        }
        
        /* 移除输入框右侧的多余图标 */
        .signinpanel .form-control.uname,
        .signinpanel .form-control.pword,
        .signinpanel .form-control.code {
            background-image: none !important;
            padding-right: 15px !important;
        }
        
        /* 按钮样式调整 - 与当前保持一致 */
        .signinpanel .btn {
            height: 45px;
            font-size: 16px;
            background-color: rgb(0, 132, 255); /* 按钮颜色与当前保持一致 */
            border: none !important;
            margin-top: 10px;
            border-radius: 4px; /* 保持圆角 */
        }
        
        /* 按钮悬停效果 */
        .signinpanel .btn:hover {
            background-color: rgb(0, 110, 213);
        }
        
        /* 登录标题样式 - 系统欢迎您登录，进一步增大字体 */
        .signinpanel h4 {
            text-align: center;
            color: rgb(0, 237, 251);
            font-size: 22px; /* 从20px进一步增加到22px，使字体更大 */
            margin-bottom: 20px; /* 增加底部边距至20px，与下方文字的距离更大 */
            margin-top: 0;
        }
        
        /* 系统名称样式 - 江西省医共体网络测试，保持较大字体 */
        .signinpanel p.m-t-md {
            text-align: center;
            color: rgb(0, 237, 251);
            font-size: 24px; /* 保持24px，比上方标题大 */
            font-weight: bold;
            margin-bottom: 30px;
            margin-top: 0;
        }
        
        /* 调整表单样式 */
        .signinpanel form {
            background: transparent !important;
            margin: 0;
            padding: 0;
            border: none !important;
        }
        
        /* 调整验证码区域 - 确保左右对齐和高度一致 */
        .signinpanel .row.m-t {
            display: flex;
            gap: 10px;
            align-items: stretch;
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-bottom: 0 !important;
        }
        
        .signinpanel .row.m-t .col-xs-6 {
            padding-left: 0 !important;
            padding-right: 0 !important;
            display: flex;
            align-items: stretch;
        }
        
        /* 确保验证码输入框与用户名、密码输入框左侧对齐 */
        .signinpanel .row.m-t .form-control {
            margin-bottom: 0;
        }
        
        /* 确保验证码图片与输入框高度相同 */
        .signinpanel .imgcode {
            height: 45px !important;
            width: 120px !important; /* 固定宽度，与输入框形成对比 */
            object-fit: cover;
            border-radius: 4px;
            display: block;
            border: none !important;
        }
        
        /* 确保验证码链接容器的高度与输入框一致 */
        .signinpanel .row.m-t a {
            display: flex;
            align-items: stretch;
            height: 100%;
            border: none !important;
        }
        
        /* 输入框图标样式 */
        .input-icon-container {
            position: relative;
            margin-bottom: 30px; /* 从20px增加到30px，加大垂直间距 */
            border: none !important;
        }
        
        /* 调整图标位置，确保不会盖住占位符文本 */
        .input-icon-container .fa,
        .captcha-input-wrapper .fa {
            position: absolute;
            left: 18px; /* 稍微向右移动图标位置 */
            top: 50%;
            transform: translateY(-50%);
            color: white;
            z-index: 1;
            font-size: 16px; /* 调整图标大小 */
        }
        
        /* 验证码区域样式 */
        .captcha-container {
            display: flex;
            gap: 10px;
            margin-bottom: 30px; /* 从20px增加到30px，加大垂直间距 */
            align-items: stretch;
            border: none !important;
        }
        
        .captcha-input-wrapper {
            flex: 1;
            position: relative;
            border: none !important;
        }
        
        .captcha-image-wrapper {
            width: 120px;
            display: flex;
            align-items: stretch;
            border: none !important;
        }
        
        /* 确保所有可能产生边框的元素都没有边框 */
        .signinpanel * {
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
        }
        
        @media screen and (max-width: 768px) {
            /* 小屏幕下隐藏左侧图片，只显示登录表单 */
            .left-image-container {
                display: none;
            }
            
            .right-content-container {
                width: 100%;
                justify-content: center;
                padding-right: 0;
            }
            
            .signinpanel {
                width: 90% !important;
                max-width: 400px;
            }
        }
    </style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>
</head>
<body class="signin">
    <!-- 在左上方添加新图片 -->
    <div class="top-left-image">
        <img alt="[ 医共体 ]" src="../static/img/logo_index.png" th:src="@{/img/logo_index.png}" class="logo-index-image">
    </div>
    
    <!-- 左侧独立图片区域 -->
    <div class="left-image-container">
        <img alt="[ 医共体 ]" src="../static/img/login.png" th:src="@{/img/login.png}" class="logo-image">
    </div>
    
    <!-- 右侧登录表单区域 -->
    <div class="right-content-container">
        <div class="signinpanel">
            <form id="signupForm" autocomplete="off">
                <h4 class="no-margins">系统欢迎您登录</h4>
                <p class="m-t-md">江西省医共体网络测试</p>

                <!-- 用户名输入框带左侧图标 -->
                <div class="input-icon-container">
<!--                    <i class="fa fa-user"></i>-->
                    <input type="text" name="username" class="form-control uname" placeholder="请输入用户名" value="" />
                </div>
                
                <!-- 密码输入框带左侧图标 -->
                <div class="input-icon-container">
<!--                    <i class="fa fa-lock"></i>-->
                    <input type="password" name="password" class="form-control pword" placeholder="请输入密码" value="" />
                </div>
                
                <!-- 验证码和图片一行显示 -->
                <div class="captcha-container" th:if="${captchaEnabled==true}">
                    <div class="captcha-input-wrapper">
<!--                        <i class="fa fa-shield"></i>-->
                        <input type="text" name="validateCode" class="form-control code" placeholder="请输入验证码" maxlength="5" />
                    </div>
                    <div class="captcha-image-wrapper">
                        <a href="javascript:void(0);" title="点击更换验证码">
                            <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode"/>
                        </a>
                    </div>
                </div>
                
                <!-- 隐藏记住我选项 -->
                <!-- <div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'"></div> -->
                
                <button class="btn btn-block" id="btnSubmit" data-loading="正在验证登录，请稍候...">登录</button>
            </form>
        </div>
    </div>
<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; var captchaEnabled = [[${captchaEnabled}]];</script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/jsencrypt.min.js" th:src="@{/js/jsencrypt.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.1}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
</body>
</html>
